Webサイトの仕組みは？Webページの作成〜公開までの流れ

さて、ゼロからWebサイトの作り方を勉強していきましょう！ていねいに解説していくので初心者の方もご安心ください。

はじめに、皆さんが普段見ているWebサイトがどのように公開されているのかを理解しましょう。

1.インターネットとは？Webとは？

スムーズに理解するために、少し広い話から始めましょう。

1-1.インターネットとは？

皆さんが普段何気なく口にする「インターネット」とは何なのでしょうか。

インターネットとはコンピュータどうしを繋げて、ありとあらゆる情報のやり取りをする仕組みのことです。

この「コンピュータどうしの繋がり」こそがインターネットなのです。

1-2. Web（ウェブ）とは？

Webという言葉もよく聞きますが、インターネットとの違いは何なのでしょうか。実はWebはインターネットのたくさんの機能のうちの１つです。

「インターネットの中にWebが含まれる」というイメージですね。インターネットにはWeb以外にもメールやファイル転送など様々な機能があります。

そして、みなさんがいつもネットサーフィンで見ているものが「Web」です。今見ているこのページもWeb上のものです。 Webはインターネットの最も主要な機能なので、インターネット＝Webという意味合いで使う方も多いんじゃないかと思います。

2.Webの世界の成り立ち

Webについてもう少し詳しく見ていきましょう。

Webのイメージ≒高層ビル群

Webの世界は高層ビル群のようなものです。ビルの中にはたくさんの部屋（Webサイト）があります。

1つ1つの部屋には住所のようなもの（≒URL）が割り当てられています。この部屋の中に公開したい情報を入れておけば、検索エンジンやリンクを通して人が見に来ることができるわけですね。

このようにたくさんの人々が部屋に情報を集め、その部屋どうしをリンクで繋げたり、部屋を検索エンジンに登録してもらったりすることで、便利なWebの世界は成り立っているのですね。

3. Webページの仕組み

私たちが普段パソコンやスマホで見ているWebページは、どのような流れで表示されるのでしょうか。

少し難しい話になりますが、いきなり全てを理解する必要はありません。なんとなく「こういうものなんだな」程度に頭に入れておきましょう。

3-1.サーバーとのやり取りでWebページは表示される

Web上で情報を公開しているソフトウェアやコンピュータのことをWebサーバーと呼びます。一方で、Webサーバから情報を受けとる方をWebクライアントと呼びます。ネットサーフィンをする私たちは、Webクライアントの方に当たりますね。

情報を公開しているWebサーバーと、皆さんのスマホなどのWebクライアントがやり取りをすることで、Webページを見ることができるわけですね。

例えばみなさんがスマホからYahooのURLを入力してアクセスするとき、「Webサーバーに見せて！」とリクエストが送られています。サーバーはそれに対して「Yahooのページですね。どうぞ！」と返すわけです。

3-2.Webページはブラウザで見る！

Webページは基本的に「Webブラウザ」を使って閲覧します。

インターネット・エクスプローラーとかGoogleクロームとかSafariとかですね。

このWebブラウザというのは、私たち（Webクライアント側）がWebページを快適に見るのを手伝ってくれるものです。

ブラウザにより快適にWebページが見れる

私たちがサーバから受け取ったWebページの情報は「コンピュータ向けの言語（コード）」で書かれています。

コンピュータ向けの言語（コード）をいちいち解読していられませんよね。そんな「コンピュータ向けの言語」を「人間向けの言語」に変えて表示してくれるのがブラウザなのです。

4. Webサイトを作って公開するまでの流れ

ようやく本題です。ゼロからWebサイトを作って、公開するにはどうしたら良いのでしょうか。ここでは、そのおおまかな流れを紹介します。

ページの内容をHTML文書で書く

ページの文章と骨格をHTMLという言語で書きます。HTMLは“指定されたタグで文を囲む”ような形で書いていきます。書き方はサルワカで丁寧に解説していきます。必要な物：テキストエディタ ※ 無料でダウンロードできます。

ページのデザインをCSSで書く

①とほぼ同時に行います。①で作成されたHTML文書のデザイン情報をCSSという言語で書いていきます。CSSにより文字の色を変えたり、線を引いたり、余白の大きさを調整したりすることができます。必要な物：テキストエディタ

サーバーを用意する

①②でWebページの情報が作られました。これを皆が見れるように公開するには、サーバーを用意する必要があります。サーバーは自作もできますが、業者からレンタルした方が簡単です。イメージ的にはビルの一室を間借りするような感じですね。レンタル料金はまちまちですが、500円/月あれば十分な性能のサーバーを借りることができます。

ドメインを取得する

Webサイトの住所は自分で決めることができます。この住所はドメインと呼ばれます。よく見る「~~ .com」や「~~.jp」というやつですね。ドメイン管理業者を通して、自分の好きなドメインを取得することができます（既に使われているものはNG）。ドメイン管理業者はレンタルサーバー会社と提携していることが多く、サーバーを借りるときにまとめて手続きができます。

サーバーにWebページ情報をアップロード

ファイル転送ソフト（＝FTPソフト）というものを使えば、自分のパソコンからサーバーに簡単にデータをアップロードすることができます。ファイル転送ソフトを使い、①②で作ったHTML文書やCSS文書などのWebページ情報をサーバーにアップロードします。必要な物：ファイル転送ソフト ※ 無料でダウンロードできます。

URLを入力すればページにアクセスできる！

ここまでの作業を済ませれば、ブラウザでURLを入力することで皆がページにアクセスできるようになります。

URLはどうやって決まる？

WebページのURLは「http://ドメイン名/ほにゃらら〜」というものになります。基本的なURLの決まり方は、URLを読み解こうで解説しています。とはいえ、現段階でしっかり理解する必要はありません。

Webページを拡散する

公開したWebページは多くの人に読んでもらいたいですよね。そこで、TwitterやfacebookなどのSNSでシェアしたり、Googleなどの検索エンジンに表示されるように設定したりします。これらの手順もサルワカで今後解説していきます。

5.結局Webサイトを作るためには何を学べば良いの？

Webサイトが公開されるまでの流れが分かったとして、結局何を学ばなければならないのでしょうか。

5-1.Webデザインのスキルを身に着けたいなら

最低限学ぶ必要があるもの

HTMLの書き方：Webページの骨格を作るために学ぶ必要があります。
CSSの書き方：Webページのデザインをおしゃれにするために学ぶ必要があります。

この2つの知識さえあれば、立派なWebページを作ることができます。あとの手続きは腰を入れて学ぶ必要はありません。ググれば、丁寧にやり方を解説してくれるからです。

この2つを学んだあとに、Webページに動きを加えたりしたくなったらJavascriptなどの言語を追加で学びましょう。

5-2.ただブログを作りたいなら…

はてなブログやAmebaブログ、Livedoorブログなどのブログサービスを使えば、さきほどのややこしい手続きを全てすっとばしてブログを作ることができます。無料で始めることができ、記事を書いて公開するのも簡単です。デザインのテンプレートも多く揃っているので、それなりにおしゃれなブログを作ることができます。

5-3.Wordpressでおしゃれなブログを作りたければ…

WordPress（ワードプレス）とはWebサイトの作成や更新を楽にしてくれるツールです。このサルワカもWordpressを使って運営されています。WordPressを使ってブログを始めるにしても、HTMLとCSSの知識がなければ、自分の好きなようにデザインをカスタマイズすることができません。 WordPressの使い方についてもサルワカで解説します。

結論

まずはHTMLとCSSの書き方を学ぼう！

【参考】ホームページ・Webページ・Webサイトの違いは？

最後に少しだけ余談を。いまさらですが、この記事では「Webページ」と「Webサイト」という単語を連発してきました。WebサイトとWebページのイメージはつかめるかと思いますが、「ホームページ」との違いは何なのでしょうか。

違いは何？

Webページ：１つのページです。たとえば、今見ているこの記事はWebページです。
Webサイト：複数のWebページの集まりです。記事のページやトップページなど全て含めて1つのWebサイトです。
ホームページ：多くの人が誤用しているのがこの言葉です。本来はブラウザを立ち上げたときに「1番はじめに表示されるページ」を指す言葉だったのですが、現在では「Webサイト」の意味で使う人が多そうですね。

Webページ、Webサイト、ホームページ、少し分かりづらいのですが、Webデザインを学ぶのであれば頭に入れておきましょう。